


//函数立即调用
(function(){
    const buildRem = function(){
        let designSize = 1920; // 设计图尺寸            
        let html = document.documentElement;            
        let wW = html.clientWidth;// 窗口宽度
        let rem = wW * 100 / designSize;             
        document.documentElement.style.fontSize = rem + 'px';
    }

    //页面初始化的时候调用

    buildRem()
    //页面缩放时font-size的调整
    //页面缩放时调用

    window.onresize = buildRem;
/* 
  1920                 100
  ----------    =   -----------
  你的宽（wW）        你的字体大小
*/



})();


//2导航条加亮







//3 动态插header




(function(){
    const header = document.querySelector('#header');
    if(header){
        const navData = [
            {
                title: "首页",
                url: "index.html",
            },
            {
                title: "作品展示",
                url: "protfolio.html",
            },
            {
                title: "博客",
                url: "blogs.html",
            },
            {
                title: "我的简历",
                url: "about.html",
            },
            {
                title: "联系我",
                url: "contact.html",
            },
        ];
        const insertNav = function(){
            let res= '';
            navData.forEach(nav=>{
                res += `<li class="${getPageName()==nav.url?'active': ''}"><a href="${nav.url}">${nav.title}</a></li>`
            })
            return res
        }

        header.insertAdjacentHTML('afterbegin',`
        <div class="container flex align-items-center justify-content-between">
        <a href="./index.html"><img class="logo" src="/images/logo.png" alt=""></a>
        <nav id="navbar" class="navbar">
            <ul>${insertNav()}</ul>
        </nav>
    </div>
    `)
    function getPageName(){
        const pathArr = location.pathname.split('/')
        return pathArr[pathArr.length-1]
    }
   }
})()
//作用域
//全局作用域
//局部作用域（函数内部，块级作用域）